<template>
    <div class="payBook">
        <Header></Header>
        <div style="height: 88px;"></div>
        <div style="width: 120px; margin-left:1200px;">
            <el-button type="primary" @click="handleDown">{{ $t('assemble.下载付款通知书') }}</el-button>
        </div>
        <div class="paybox" id="paybox">
            <!-- logo -->
            <div class="logo">
                <div class="logobox">
                    <img class="logoimg" src="../../static/imgs/paylogo.png" alt="">
                    <p style="line-height: 15px;">{{ $t('assemble.上海茂侨实业有限公司') }}</p>
                    <p style="line-height: 15x;">Shanghai M.Q.CO.,Ltd</p>
                    <p style="line-height: 15px;">support@spsol.cn</p>
                </div>


            </div>
            <div class="title">
                {{ $t('assemble.付款通知单') }}
            </div>
            <div>

            </div>

            <!-- 收货人信息 -->
            <div class="consignee">
                <p>{{ $t('assemble.至') }}:<span style="margin-left: 20px;">{{ dataList.invoice_name }}</span></p>
                <!-- <p>收件人: <span style="margin-left: 20px;">{{ dataList.invoicesite.name }}</span></p> -->
                <p>{{ $t('assemble.邮箱地址') }}:<span style="margin-left: 20px;">{{ userData.companyemail }}</span></p>
                <p>{{ $t('assemble.电话') }} :<span style="margin-left: 20px;">{{ userData.phone }}</span></p>
            </div>
            <!-- 商品信息 -->
            <div class="productdata">
                <el-table ref="singleTable" :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column property="number" :label="$t('assemble.订单编号')" width="240">
                    </el-table-column>
                    <el-table-column property="name" :label="$t('assemble.商品名称')" width="240">
                    </el-table-column>
                    <el-table-column property="bazaar" :label="$t('assemble.授权渠道')">
                    </el-table-column>
                    <el-table-column property="price" :label="$t('assemble.价格')">
                    </el-table-column>
                    <el-table-column property="num" :label="$t('assemble.数量')">
                    </el-table-column>
                    <el-table-column property="sum" :label="$t('assemble.共计')">
                    </el-table-column>
                </el-table>
            </div>
            <div class="sum">
                <div style="display: flex; justify-content: space-around;">
                    <p>{{ $t('assemble.总计') }}：</p>
                    <p>￥{{ sumNum }}</p>
                </div>
                <div class="heng6"></div>

                <div style="display: flex; justify-content: space-around;">
                    <p>{{ $t('assemble.共计') }}：</p>
                    <p> <span v-if="dataList.user_area_id != '中国大陆'">CNY</span> ￥{{ sumNum }}</p>

                </div>
            </div>

            <div class="consigneemessage">
                <div class="consigneemessagebox">
                    <p>{{ $t('assemble.收件人的公司名称') }}:</p>
                    <p style="margin-left: 10px;"> {{ dataList.delivery.company }}</p>
                </div>
                <div class="consigneemessagebox">
                    <p>{{ $t('assemble.收件人的姓名') }}:</p>
                    <p style="margin-left: 10px;">{{ dataList.delivery.name }}</p>
                </div>
                <div class="consigneemessagebox">
                    <p>{{ $t('assemble.收件人的联系电话') }}:</p>
                    <p style="margin-left: 10px;">{{ dataList.delivery.mobile }}</p>
                </div>
                <div class="consigneemessagebox">
                    <p>{{ $t('assemble.收货地址') }}:</p>
                    <p style="margin-left: 10px;">{{ dataList.delivery.site }}</p>
                </div>
                <div class="consigneemessagebox">
                    <p>{{ $t('assemble.邮政编码') }}:</p>
                    <p style="margin-left: 10px;">{{ dataList.delivery.postcode }}</p>
                </div>
                <!-- <div class="consigneemessagebox">
                    <p>{{$t('assemble.寄送地区')}}:</p>
                    <p style="margin-left: 10px;">{{$t('assemble.中国')}}</p>
                </div> -->
            </div>
            <div class="heng"></div>
            <div class="payee" style="font-size: 14px;">
                <p>{{ $t('assemble.支付方法银行转帐') }}</p>
                <p>{{ $t('assemble.送货在确实收到货款起计的7个工作天内安排将订购的货品送出') }}</p>
                <p>{{ $t('assemble.工作日星期一至星期五的上午9时30分至下午5时30分法定假期除外') }}</p>
                <p>{{ $t('assemble.付款请按本通知单的总金额存入以下的银行账户') }}</p>
                <div v-if="dataList.user_area_id == '中国大陆'">
                    <p style="margin-left: 60px;">{{ $t('assemble.收款银行名称中国建设银行上海市白鶴支行') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.账户号码') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.收款人名称上海茂侨实业有限公司') }}</p>
                    <p style="margin-left: 60px;">{{ $t('assemble.联行号') }}</p>
                    <p>{{ $t('assemble.此通知单仅作付款通知不可用于财务入帐电子版增值稅发票会于15个工作日内寄达订单所留的邮箱') }}</p>

                </div>
                <div v-else>
                    <p style="margin-left: 60px;">{{ $t('assemble.按当天中间汇率换算成美元') }}</p>
                    <p style="margin-left: 60px;"> Name of bank: China construction bank corporation </p>
                    <p style="margin-left: 165px;">Shanghai branch Shanghai Yangtze River </p>
                    <p style="margin-left: 165px;">Delta Integration Demonstration Zone Sub-branch；</p>
                    <p style="margin-left: 60px;">Account number：3105 0183 4100 0000 1451 </p>
                    <p style="margin-left: 60px;"> Account name： Shanghai MaoQiao Industrial Co., Ltd.</p>
                    <p style="margin-left: 60px;"> Swift code: PCBCCNBJSHX </p>
                    <p>{{ $t('assemble.此通知单仅作付款通知不可用于财务入帐商业发票会于15个工作日内寄达订单所留的邮箱') }}</p>

                </div>

            </div>

        </div>
        <div style="height: 184px;"></div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import htmlToPdf from '../../utils/htmltopdf';
export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            tableData: [],
            dataList: [],
            userData: {},
            sumNum: 0,
            lang: 'zh'

        }
    },
    created() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')
        console.log("3333333", localStorage.getItem('langtype'))
    },
    mounted() {
        this.userData = JSON.parse(localStorage.getItem("userData"))
        this.dataList = JSON.parse(localStorage.getItem("dataAll"))
        // this.dataList.price = parseFloat(this.dataList.price ) 
        this.dataList.num = this.dataList.num.replace(/,/g, '')
        this.sumNum = this.dataList.price * this.dataList.num
        this.sumNum = this.numberToCurrencyNo(this.sumNum)
        console.log("dataList", this.dataList)


        this.tableData.push({
            number: this.dataList.number,
            name: this.dataList.name,
            bazaar: this.dataList.bazaar,
            price: this.dataList.price,
            num: this.numberToCurrencyNo(this.dataList.num),
            sum: this.sumNum,
        })


    },
    methods: {
        numberToCurrencyNo(value) {
            if (!value) return 0
            // 获取整数部分
            const intPart = Math.trunc(value)
            // 整数部分处理，增加,
            const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            // 预定义小数部分
            let floatPart = ''
            // 将数值截取为小数部分和整数部分
            const valueArray = value.toString().split('.')
            if (valueArray.length === 2) { // 有小数部分
                floatPart = valueArray[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
            }
            return intPartFormat + floatPart
        }
        ,

        handleDown() {
            htmlToPdf.downloadPDF(document.querySelector('#paybox'), '付款通知书');
        },

    }
}
</script>

<style scoped lang="scss">
.payBook {
    .paybox {
        width: 1200px;
        margin: 0 auto;
        padding: 0 100px;
        box-sizing: border-box;
        padding: 30px;
        box-sizing: border-box;
        font-size: 15px;

        .logo {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .logobox {

                .logoimg {
                    width: 250px;
                    margin-left: -23px;
                }
            }

        }

        .title {
            font-size: 20px;
            font-weight: bold;
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }

        .sum {
            width: 600px;
            float: right;
        }

        .consigneemessage {
            clear: both;
            font-size: 14px;

            .consigneemessagebox {
                display: flex;
            }
        }

        .heng {
            width: 1200px;
            height: 1px;
            background-color: #EDEDED;
        }

        .heng6 {
            width: 600px;
            height: 1px;
            background-color: #EDEDED;
        }
    }
}
</style>